<template>
  <div class="sec-detail-main">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="敏感场景" name="tab0">
        <secQuestion ref="questionRef" :data="questions" :disabled="false"> </secQuestion>
      </el-tab-pane>
      <el-tab-pane label="审计要求" name="tab1">
        <div>
          <sec-form
            :searchBox="{ span: 7 }"
            :span="8"
            label-width="80px"
            :ruleForm="sForm.ruleForm"
            :formData="sForm.formData"
            @reset="init"
            @submitForm="init"
          >
          </sec-form>
        </div>
        <div class="divider"></div>
        <div class="table-box">
          <sec-table :tableData="sTable.rows" :tableCol="sTable.cols" ref="secTabel" align="left">
            <template v-slot:scene="{ data }">
              <el-tag
                v-for="(item, index) in data.row.scene"
                :key="index"
                @click="sceneClick(item)"
                style="margin:4px;cursor:pointer"
              >
                {{ item }}
              </el-tag>
            </template>
          </sec-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审计要求-关注" name="tab2">
        <div>
          <sec-form
            :searchBox="{ span: 7 }"
            :span="8"
            label-width="80px"
            :ruleForm="aForm.ruleForm"
            :formData="aForm.formData"
            @reset="init"
            @submitForm="init"
          >
          </sec-form>
        </div>
        <div class="divider"></div>
        <div class="table-box">
          <sec-table :tableData="aTable.rows" :tableCol="aTable.cols" ref="secTabel" align="left">
            <template v-slot:scene="{ data }">
              <el-tag
                v-for="(item, index) in data.row.scene"
                :key="index"
                @click="sceneClick(item)"
                style="margin:4px;cursor:pointer"
              >
                {{ item }}
              </el-tag>
            </template>
          </sec-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { paginationMixin } from "common/js/mixin";
import { consultDetailAnswerApi, consultDetailListApi, consultItemSaveApi } from "api/consultApi";
import secQuestion from "components/questionnaire/index.vue";
import consultRequest from "../component/consultRequest.vue";
let searForm = {
  ruleForm: {
    sceneName: "",
    itemName: "",
  },
  formData: [
    { type: "text", label: "场景名称", prop: "sceneName" },
    { type: "text", label: "指标名称", prop: "itemName" },
  ],
};
let cols = [
  { type: "slot", label: "关联场景", prop: "scene" },
  { label: "指标名称", prop: "name" },
  { label: "指标要求", prop: "reportItemContent" },
  { label: "安全建议", prop: "repairRecommend" },
];
export default {
  name: "",
  props: {},
  mixins: [paginationMixin],
  components: {
    secQuestion,
    consultRequest,
  },
  data() {
    return {
      activeName: "tab0",
      questions: [],
      query: {},
      //审计要求
      sForm: searForm,
      //审计要求-关注
      aForm: searForm,
      //审计要求
      sTable: {
        rows: [],
        cols: [
          ...cols,
          {
            type: "operation",
            width: 100,
            label: "操作",
            children: [
              {
                labelFunc: ({ row }) => {
                  return row.followFlag === "1" ? "已关注" : "关注";
                },
                disabled: ({ row }) => {
                  return row.followFlag === "1" ? true : false;
                },
                click: ({ row }) => {
                  console.log(row);
                  this.utils.$confirm(
                    { content: "是否将该数据标记为“关注？标记成功之后可在「审计要求-关注」tab下进行查看" },
                    () => {
                      this.consultItemSave(row.id, 1);
                    },
                  );
                },
              },
            ],
          },
        ],
      },
      //审计要求-关注
      aTable: {
        rows: [],
        cols: [
          ...cols,
          {
            type: "operation",
            width: 100,
            label: "操作",
            children: [
              {
                label: "取消关注",
                click: ({ row }) => {
                  this.utils.$confirm({ content: "是否将该数据标记为「取消关注」？" }, () => {
                    this.consultItemSave(row.id, "0");
                  });
                },
              },
            ],
          },
        ],
      },
    };
  },
  computed: {},
  mounted() {
    this.query = this.$route.query;
    this.activeName = this.query.tab || "tab0";
    this.init();
  },
  methods: {
    //关注或者取消关注
    consultItemSave(id, followFlag) {
      consultItemSaveApi({ id, followFlag }).then((res) => {
        let state = this.message.state(res);
        if (!state) return;
        this.init();
      });
    },
    init() {
      this.page = 1;
      if (this.activeName === "tab0") {
        this.initScene();
      } else if (this.activeName === "tab1") {
        this.getTableList();
      } else if (this.activeName === "tab2") {
        this.getTableList("1");
      }
    },
    sceneClick(item) {
      this.sForm.ruleForm.sceneName = item;
      this.getTableList();
    },
    getTableList(followFlag) {
      let { itemName, sceneName } = this.sForm.ruleForm;
      consultDetailListApi({
        pageNum: this.page,
        followFlag: followFlag || null,
        pageSize: this.pageSize,
        consultId: this.query.id,
        itemName: itemName,
        sceneName: sceneName,
      }).then((res) => {
        if (followFlag == "1") {
          this.aTable.rows = res.data;
          // this.totalSize = res.count;
        } else {
          this.sTable.rows = res.data;
          // this.totalSize = res.count;
        }
      });
    },
    initScene() {
      consultDetailAnswerApi({ id: this.query.id }).then((res) => {
        let data = res.data;
        this.questions = data.questions;
      });
    },
    handleClick() {
      this.$router.push({ path: "/consult/detail", query: { id: this.query.id, tab: this.activeName } });
      this.init();
    },
    sizeChange(val) {
      this.pageSize = val;
      this.getTableList();
    },
    currentChange(val) {
      this.page = val;
      this.getTableList();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .question-con {
  box-shadow: none;
}
::v-deep .question-main {
  margin: 0;
}
.divider {
  height: 1px;
  background: #f0f0f0;
  margin: 10px -15px;
}
.table-box {
  margin-top: 20px;
}
</style>
